<template>
  <div class="app">
    <router-view />
  </div>
</template>


<script setup>
import { fetchEventSource } from "@microsoft/fetch-event-source";
import subscribeWarnMsg from "./views/sse/sse";
import {
  Loginservice,
  getyushuidata,
  getnowweather,
  getshuikudata,
  getzhamstatus,
  Getshuizhidata,
  getdevicedalldata,
  getshexiangtoudata,
  Getshuizhissedata,
  getdangerdevivedsse,
  getdangervalue,
  Getyushuiqing,
  getshuiweidata,
  Getshuizhizhibiao,
  getchukulldata,
  getgaojinAll,
} from "./api/index";
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import JSEncrypt from "jsencrypt/bin/jsencrypt.min";
import axios from "axios";
import { useStore } from "vuex";
let interfece = ref(null);
const store = useStore();
const { proxy } = getCurrentInstance();
let data = reactive({
  source: null,
  source2: null,
});
let sse = ref(null);
let info = ref(null);
const login = async () => {
  const encrypt = new JSEncrypt();
  //从后端请求获取公钥
  const publicKey =
    "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC/5mTrS5EsG9gMi3QPhjD4NAKri4E0Fg/2ma7VQq+n0tzXGX4shAzPxu4s8jWTur13ObMldyqIE6h74fMZRbPCmbCtd2jmx0KOiJQXpaWgP79u/FZEXFwwbJ7E4BH5mviXQJpd5nqt/adBs5j9Sh3ApqshIG1aVFSlXbfmLg836QIDAQAB";
  // 设置公钥
  encrypt.setPublicKey(publicKey);
  // 定义要加密的数据
  const admin = "mft";
  const password = "sm@123456";
  // 加密数据，加密后的数据为base64编码的字符串，后端需先解码
  const encryptedPassword = encrypt.encrypt(password);
  const encryptedadmin = encrypt.encrypt(admin);
  // console.log(encryptedadmin, encryptedPassword);
  const res = await Loginservice({
    account: encryptedadmin,
    password: encryptedPassword,
  });
  localStorage.setItem("token", res.data.tokenValue);
};
onMounted(async () => {
  await login();
  interfece.value = setInterval(async () => {
    await login();

    let url = "/prod-api/general/api/sse/online?timeout=" + "7200000";
    if (typeof EventSource !== "undefined") {
      // 创建一个新的EventSource实例
      // console.log(1111);
      if (data.source) {
        data.source.close();
      }
      data.source = null;
      data.source = new EventSource(url);
      data.source.addEventListener("data", (e) => {
        let data = JSON.parse(e.data);
        // console.log(data);
        if (e.lastEventId == "dp-key-12") {
          store.commit("saveweather", data);
        } else if (e.lastEventId == "dp-key-16") {
          store.commit("saveshuiku", data);
        } else if (e.lastEventId == "dp-key-7") {
          store.commit("savezhamastatus", data);
        } else if (e.lastEventId == "dp-key-15") {
          window.ue4("yushuidata", {
            data: data,
          });
        } else if (e.lastEventId == "dp-key-502") {
          window.ue4("shenliudata", {
            data: data,
          });
        } else if (e.lastEventId == "dp-key-501") {
          window.ue4("shenyadata", {
            data: data,
          });
        } else if (e.lastEventId == "dp-key-6") {
          store.commit("saveshuizhi", data);
        } else if (e.lastEventId == "dp-key-13") {
          window.ue4("shuiweidata", {
            data: data,
          });
        } else if (e.lastEventId == "dp-key-19") {
          store.commit("savechukull", data);
        } else if (e.lastEventId == "dp-key-503") {
          window.ue4("weiyisby", {
            data: data,
          });
        } else if (e.lastEventId == "dp-key-504") {
          window.ue4("weiyisbx", {
            data: data,
          });
        }
      });
      // 监听打开事件
      data.source.addEventListener(
        "open",
        function (event) {
          console.log("连接已打开。");
          getshuikudata().then((res) => {
            // console.log(res);
            store.commit("saveshuiku", res);
          });
          getnowweather().then((res) => {
            // console.log(res);
            store.commit("saveweather", res);
          });
          getyushuidata().then((res) => {
            // console.log(res, "水雨情");
            window.ue4("yushuidata", {
              data: res,
            });
          });
          getzhamstatus().then((res) => {
            store.commit("savezhamastatus", res);
            // console.log(res, "闸门状态");
          });
          // Getshuizhidata({}).then((res) => {
          //   console.log(res, "水质");
          // });
          // 渗压计设备数据
          getdevicedalldata({ type: 1 }).then((res) => {
            // console.log(res, "渗压计");
            window.ue4("shenyadata", {
              data: res,
            });
          });
          // 渗流计设备数据
          getdevicedalldata({ type: 2 }).then((res) => {
            // console.log(res, "渗流计");
            window.ue4("shenliudata", {
              data: res,
            });
          });
          // 变形检测垂直位移设备
          getdevicedalldata({ type: 3 }).then((res) => {
            // console.log(res, "变形检测垂直位移");
            window.ue4("weiyisby", {
              data: res,
            });
          });
          // 变形检测水平位移设备
          getdevicedalldata({ type: 4 }).then((res) => {
            // console.log(res, "变形检测水平位移");
            window.ue4("weiyisbx", {
              data: res,
            });
          });
          // 摄像头设备数据
          getshexiangtoudata({}).then((res) => {
            // console.log(res, "摄像头");
            window.ue4("shexiangtoudata", {
              data: res,
            });
          });
          // 水质检测
          Getshuizhissedata({}).then((res) => {
            // console.log(res, "水质检测，水质检测指标接口");
            store.commit("saveshuizhi", res);
          });
          // 水位设备列表
          getshuiweidata().then((res) => {
            // console.log(res, "水位");
            window.ue4("shuiweidata", {
              data: res,
            });
          });
          getchukulldata().then((res) => {
            // console.log(res, "实时出库流量");
            store.commit("savechukull", res);
          });
          // Getshuizhizhibiao({}).then((res) => {
          //   console.log(res, "水质检测指标接口");
          // });
          // getgaojinAll({ page: 1, size: 100000 }).then((res) => {
          //   // console.log(res.data.records);
          //   let arr = res.data.records.filter((item) => item.type > 4);
          //   console.log(JSON.parse(arr[0].content));
          //   console.log(arr);

          // });
        },
        false
      );
      // 监听错误事件
      data.source.addEventListener(
        "error",
        function (event) {
          if (data.source.readyState === EventSource.CONNECTING) {
            console.log("正在尝试连接...");
          } else {
            console.log("连接已关闭。");
          }
          // 这里可以放置处理连接关闭或者失败需要执行的代码
        },
        false
      );
      // 监听数据事件
      data.source.addEventListener(
        "message",
        function (event) {
          let data = JSON.parse(event.data);
          // console.log(data);
          store.commit("savegaojingtitle", data);
        },
        false
      );
    } else {
      console.log("浏览器不支持SSE。");
    }
  }, 300000);
  let url = "/prod-api/general/api/sse/online?timeout=" + "7200000";
  if (typeof EventSource !== "undefined") {
    // 创建一个新的EventSource实例
    // console.log(1111);
    data.source = new EventSource(url);
    data.source.addEventListener("data", (e) => {
      let data = JSON.parse(e.data);
      // console.log(data);
      if (e.lastEventId == "dp-key-12") {
        store.commit("saveweather", data);
      } else if (e.lastEventId == "dp-key-16") {
        store.commit("saveshuiku", data);
      } else if (e.lastEventId == "dp-key-7") {
        store.commit("savezhamastatus", data);
      } else if (e.lastEventId == "dp-key-15") {
        window.ue4("yushuidata", {
          data: data,
        });
      } else if (e.lastEventId == "dp-key-502") {
        window.ue4("shenliudata", {
          data: data,
        });
      } else if (e.lastEventId == "dp-key-501") {
        window.ue4("shenyadata", {
          data: data,
        });
      } else if (e.lastEventId == "dp-key-6") {
        store.commit("saveshuizhi", data);
      } else if (e.lastEventId == "dp-key-13") {
        window.ue4("shuiweidata", {
          data: data,
        });
      } else if (e.lastEventId == "dp-key-19") {
        store.commit("savechukull", data);
      } else if (e.lastEventId == "dp-key-503") {
        window.ue4("weiyisby", {
          data: data,
        });
      } else if (e.lastEventId == "dp-key-504") {
        window.ue4("weiyisbx", {
          data: data,
        });
      }
    });
    // 监听打开事件
    data.source.addEventListener(
      "open",
      function (event) {
        console.log("连接已打开。");
        getshuikudata().then((res) => {
          // console.log(res);
          store.commit("saveshuiku", res);
        });
        getnowweather().then((res) => {
          // console.log(res);
          store.commit("saveweather", res);
        });
        getyushuidata().then((res) => {
          // console.log(res, "水雨情");
          window.ue4("yushuidata", {
            data: res,
          });
        });
        getzhamstatus().then((res) => {
          store.commit("savezhamastatus", res);
          // console.log(res, "闸门状态");
        });
        // Getshuizhidata({}).then((res) => {
        //   console.log(res, "水质");
        // });
        // 渗压计设备数据
        getdevicedalldata({ type: 1 }).then((res) => {
          // console.log(res, "渗压计");
          window.ue4("shenyadata", {
            data: res,
          });
        });
        // 渗流计设备数据
        getdevicedalldata({ type: 2 }).then((res) => {
          // console.log(res, "渗流计");
          window.ue4("shenliudata", {
            data: res,
          });
        });
        // 变形检测垂直位移设备
        getdevicedalldata({ type: 3 }).then((res) => {
          // console.log(res, "变形检测垂直位移");
          window.ue4("weiyisby", {
            data: res,
          });
        });
        // 变形检测水平位移设备
        getdevicedalldata({ type: 4 }).then((res) => {
          // console.log(res, "变形检测水平位移");
          window.ue4("weiyisbx", {
            data: res,
          });
        });
        // 摄像头设备数据
        getshexiangtoudata({}).then((res) => {
          // console.log(res, "摄像头");
          window.ue4("shexiangtoudata", {
            data: res,
          });
        });
        // 水质检测
        Getshuizhissedata({}).then((res) => {
          // console.log(res, "水质检测，水质检测指标接口");
          store.commit("saveshuizhi", res);
        });
        // 水位设备列表
        getshuiweidata().then((res) => {
          // console.log(res, "水位");
          window.ue4("shuiweidata", {
            data: res,
          });
        });
        getchukulldata().then((res) => {
          // console.log(res, "实时出库流量");
          store.commit("savechukull", res);
        });
        // Getshuizhizhibiao({}).then((res) => {
        //   console.log(res, "水质检测指标接口");
        // });
        // getgaojinAll({ page: 1, size: 100000 }).then((res) => {
        //   // console.log(res.data.records);
        //   let arr = res.data.records.filter((item) => item.type > 4);
        //   console.log(JSON.parse(arr[0].content));
        //   console.log(arr);

        // });
      },
      false
    );
    // 监听错误事件
    data.source.addEventListener(
      "error",
      function (event) {
        if (data.source.readyState === EventSource.CONNECTING) {
          console.log("正在尝试连接...");
        } else {
          console.log("连接已关闭。");
        }
        // 这里可以放置处理连接关闭或者失败需要执行的代码
      },
      false
    );
    // 监听数据事件
    data.source.addEventListener(
      "message",
      function (event) {
        let data = JSON.parse(event.data);
        // console.log(data);
        store.commit("savegaojingtitle", data);
      },
      false
    );
  } else {
    console.log("浏览器不支持SSE。");
  }
});

onUnmounted(() => {
  if (data.source) {
    data.source.close();
  }
  clearInterval(interfece.value);
  interfece.value = "";
});
</script>

<style lang="scss">
.app {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // .map {
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 0px;
  //   left: 0px;
  //   overflow: hidden;
  //   // z-index: 1;
  // }
}
</style>
